<template>
  <div>
    <div v-if="showbutton"><el-button @click="submit()"> 填报</el-button></div>
    <table style="width: 100%" border="1" cellspacing="1">
      <tbody>
        <tr>
          <td colspan="1">中心名称</td>
          <td colspan="8"><input type="text" v-model="dataform.orgName" /></td>
        </tr>
        <tr>
          <td colspan="1">主管单位</td>
          <td colspan="4">
            <input type="text" v-model="dataform.masterOrgName" />
          </td>
          <td colspan="2">法定代表人</td>
          <td colspan="2">
            <input type="text" v-model="dataform.legalPerson" />
          </td>
        </tr>
        <tr>
          <td colspan="1">负责人</td>
          <td colspan="4">
            <input type="text" v-model="dataform.responsiblePeople" />
          </td>
          <td colspan="2">固定电话</td>
          <td colspan="2">
            <input type="text" v-model="dataform.responsiblePhone" />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="3">经营管理模式(划“√”)</td>
          <td colspan="3">体育部门管理</td>
          <td colspan="3">教育部门管理</td>
          <td colspan="2" rowspan="2">其他</td>
        </tr>
        <tr>
          <td colspan="1">独立运行</td>
          <td colspan="1">依托体校</td>
          <td colspan="1">委托社会</td>
          <td colspan="1">独立运行</td>
          <td colspan="1">依托校外教育机构</td>
          <td colspan="1">委托社会</td>
        </tr>
        <tr>
          <td colspan="1">
            <input type="text" v-model="Businessmodel.SportsIndependence" />
          </td>
          <td colspan="1">
            <input type="text" v-model="Businessmodel.SportsSchool" />
          </td>
          <td colspan="1">
            <input type="text" v-model="Businessmodel.SportsSociety" />
          </td>
          <td colspan="1">
            <input
              type="text"
              v-model="Businessmodel.EducationalIndependence"
            />
          </td>
          <td colspan="1">
            <input type="text" v-model="Businessmodel.EducationOffCampus" />
          </td>
          <td colspan="1">
            <input type="text" v-model="Businessmodel.EducationalSociety" />
          </td>
          <td colspan="2">
            <input type="text" v-model="Businessmodel.other" />
          </td>
        </tr>
        <tr>
          <td colspan="1">建成时间</td>
          <td colspan="2"><input type="text" v-model="dataform.upTime" /></td>
          <td colspan="4">总面积(㎡)</td>
          <td colspan="2"><input type="text" v-model="dataform.acreage" /></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="4">所获级别命名授予时间(年份)</td>
          <td colspan="4">国家级校外体育活动中心</td>
          <td colspan="4">
            <input type="text" v-model="dataform.getNationYear" />
          </td>
        </tr>
        <tr>
          <td colspan="4">省级校外体育活动中心</td>
          <td colspan="4">
            <input type="text" v-model="dataform.getProvinceYear" />
          </td>
        </tr>
        <tr>
          <td colspan="4">市级校外体育活动中心</td>
          <td colspan="4">
            <input type="text" v-model="dataform.getCityYear" />
          </td>
        </tr>
        <tr>
          <td colspan="4">县级校外体育活动中心</td>
          <td colspan="4">
            <input type="text" v-model="dataform.getCountyYear" />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="4">管理人员</td>
          <td colspan="2" rowspan="2">在编</td>
          <td colspan="2" rowspan="2">聘用</td>
          <td colspan="2" rowspan="2">指导教师总人数</td>
          <td colspan="1">在编</td>
          <td colspan="1">聘用</td>
        </tr>
        <tr>
          <td colspan="1">
            <input type="text" v-model="dataform.teacherOnNum" />
          </td>
          <td colspan="1">
            <input type="text" v-model="dataform.teacherOutNum" />
          </td>
        </tr>
        <tr>
          <td colspan="2" rowspan="2">
            <input type="text" v-model="dataform.manageOnNum" />
          </td>
          <td colspan="2" rowspan="2">
            <input type="text" v-model="dataform.manageOutNum" />
          </td>
          <td colspan="2" rowspan="2">教练员</td>
          <td colspan="1">在编</td>
          <td colspan="1">聘用</td>
        </tr>
        <tr>
          <td colspan="1">
            <input type="text" v-model="dataform.coachOnNum" />
          </td>
          <td colspan="1">
            <input type="text" v-model="dataform.coachOutNum" />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="2">举办活动/培训</td>
          <td colspan="4">年均数量(次)</td>
          <td colspan="4">参加活动/培训的学生总量(人)</td>
        </tr>
        <tr>
          <td colspan="4">
            <input type="text" v-model="dataform.yearActivityNum" />
          </td>
          <td colspan="4">
            <input type="text" v-model="dataform.yearJoinPeopleNum" />
          </td>
        </tr>
        <tr>
          <td colspan="1" :rowspan="2 * dataform.fSheet6bList.length + 1">
            已开展的项目
            <el-tooltip
              content="右键点击项目名称可以新增或删除项目"
              placement="top"
              effect="light"
              :open-delay="500"
            >
              <span style="color: #666; font-size: 12px; cursor: help;">ⓘ</span>
            </el-tooltip>
          </td>
        </tr>

        <tr>
          <td
            colspan="2"
            rowspan="2"
            @contextmenu.prevent="showProjectContextMenu($event, 0)"
          >
            <el-tooltip
              content="右键点击可以新增或删除项目"
              placement="top"
              effect="light"
              :open-delay="500"
            >
              <div>项目1名称</div>
            </el-tooltip>
          </td>
          <td colspan="2" rowspan="2">
            <input type="text" v-model="dataform.fSheet6bList[0].sportName" />
          </td>
          <td colspan="2">指导教师数量</td>
          <td colspan="2">
            <input type="text" v-model="dataform.fSheet6bList[0].teacherNum" />
          </td>
        </tr>
        <tr>
          <td colspan="2">教练员数量</td>
          <td colspan="2">
            <input type="text" v-model="dataform.fSheet6bList[0].coachNum" />
          </td>
        </tr>
        <tr>
          <td
            colspan="2"
            rowspan="2"
            @contextmenu.prevent="showProjectContextMenu($event, 1)"
          >
            <el-tooltip
              content="右键点击可以新增或删除项目"
              placement="top"
              effect="light"
              :open-delay="500"
            >
              <div>项目2名称</div>
            </el-tooltip>
          </td>
          <td colspan="2" rowspan="2">
            <input type="text" v-model="dataform.fSheet6bList[1].sportName" />
          </td>
          <td colspan="2">指导教师数量</td>
          <td colspan="2">
            <input type="text" v-model="dataform.fSheet6bList[1].teacherNum" />
          </td>
        </tr>
        <tr>
          <td colspan="2">教练员数量</td>
          <td colspan="2">
            <input type="text" v-model="dataform.fSheet6bList[1].coachNum" />
          </td>
        </tr>
        <template v-for="(item, index) in dataform.fSheet6bList.slice(2)">
          <tr>
            <td
              colspan="2"
              rowspan="2"
              @contextmenu.prevent="showProjectContextMenu($event, index + 2)"
            >
              <el-tooltip
                content="右键点击可以新增或删除项目"
                placement="top"
                effect="light"
                :open-delay="500"
              >
                <div>项目{{ index + 3 }}名称</div>
              </el-tooltip>
            </td>
            <td colspan="2" rowspan="2">
              <input type="text" v-model="item.sportName" />
            </td>
            <td colspan="2">指导教师数量</td>
            <td colspan="2"><input type="text" v-model="item.teacherNum" /></td>
          </tr>
          <tr>
            <td colspan="2">教练员数量</td>
            <td colspan="2"><input type="text" v-model="item.coachNum" /></td>
          </tr>
        </template>
        <tr>
          <td colspan="1" :rowspan="totalActivityRows">
            参加的活动和获得的荣誉与奖励(自2011年起)
          </td>
          <td colspan="1" :rowspan="additionalNationalRows + 1">全国性</td>
          <td colspan="1">参加时间</td>
          <td colspan="6">比赛/活动名称、奖励和荣誉</td>
        </tr>
        <template
          v-for="(item, index) in dataform.fSheet6cList.filter(
            item => item.joinActivityTypeId === 1
          )"
        >
          <tr>
            <td colspan="1">
              <el-tooltip
                content="右键点击可以新增或删除行"
                placement="top"
                effect="light"
                :open-delay="500"
              >
                <input
                  type="text"
                  v-model="item.joinTime"
                  @contextmenu.prevent="
                    showActivityContextMenu($event, index, 'national')
                  "
                />
              </el-tooltip>
            </td>
            <td colspan="6">
              <el-tooltip
                content="右键点击可以新增或删除行"
                placement="top"
                effect="light"
                :open-delay="500"
              >
                <input
                  type="text"
                  v-model="item.result"
                  @contextmenu.prevent="
                    showActivityContextMenu($event, index, 'national')
                  "
                />
              </el-tooltip>
            </td>
          </tr>
        </template>
        <tr>
          <td colspan="1" :rowspan="additionalProvincialRows + 1">省市级</td>
          <td colspan="1">参加时间</td>
          <td colspan="6">比赛/活动名称、奖励和荣誉</td>
        </tr>
        <template
          v-for="(item, index) in dataform.fSheet6cList.filter(
            item => item.joinActivityTypeId === 2
          )"
        >
          <tr>
            <td colspan="1">
              <el-tooltip
                content="右键点击可以新增或删除行"
                placement="top"
                effect="light"
                :open-delay="500"
              >
                <input
                  type="text"
                  v-model="item.joinTime"
                  @contextmenu.prevent="
                    showActivityContextMenu($event, index, 'provincial')
                  "
                />
              </el-tooltip>
            </td>
            <td colspan="6">
              <el-tooltip
                content="右键点击可以新增或删除行"
                placement="top"
                effect="light"
                :open-delay="500"
              >
                <input
                  type="text"
                  v-model="item.result"
                  @contextmenu.prevent="
                    showActivityContextMenu($event, index, 'provincial')
                  "
                />
              </el-tooltip>
            </td>
          </tr>
        </template>
        <tr>
          <td colspan="1" :rowspan="additionalOtherRows + 1">其他活动</td>
          <td colspan="1">参加时间</td>
          <td colspan="6">比赛/活动名称、奖励和荣誉</td>
        </tr>
        <template
          v-for="(item, index) in dataform.fSheet6cList.filter(
            item => item.joinActivityTypeId === 3
          )"
        >
          <tr>
            <td colspan="1">
              <el-tooltip
                content="右键点击可以新增或删除行"
                placement="top"
                effect="light"
                :open-delay="500"
              >
                <input
                  type="text"
                  v-model="item.joinTime"
                  @contextmenu.prevent="
                    showActivityContextMenu($event, index, 'other')
                  "
                />
              </el-tooltip>
            </td>
            <td colspan="6">
              <el-tooltip
                content="右键点击可以新增或删除行"
                placement="top"
                effect="light"
                :open-delay="500"
              >
                <input
                  type="text"
                  v-model="item.result"
                  @contextmenu.prevent="
                    showActivityContextMenu($event, index, 'other')
                  "
                />
              </el-tooltip>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
    <div style="display: flex; justify-content: space-between;">
      <div>填表人：<input type="text" v-model="dataform.writePeople" /></div>
      <div>联系电话：<input type="text" v-model="dataform.writePhone" /></div>
    </div>
    <div style="display: flex; justify-content: space-between;">
      <div>填报时间：<input type="text" v-model="dataform.writeTime" /></div>
      <div>填报单位：<input type="text" v-model="dataform.orgName" /></div>
    </div>
    <!-- 添加右键菜单 -->
    <div v-show="showMenu" :style="menuStyle" class="context-menu">
      <template v-if="currentSection === 'project'">
        <div @click="addRow" class="menu-item">新增一个项目</div>
        <div @click="deleteRow" class="menu-item">删除这个项目</div>
      </template>
      <template v-else-if="currentSection === 'activity'">
        <div @click="addRow" class="menu-item">新增一行</div>
        <div @click="deleteRow" class="menu-item">删除这行</div>
      </template>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import { insert_update_sheet6 } from "@/api/statistics.js";
export default {
  props: {
    Alldata: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      showbutton: true,
      dataform: {
        orgName: "测试表6机构",
        masterOrgName: "主管单位",
        legalPerson: "法定代表人",
        responsiblePeople: "负责人名字",
        responsiblePhone: "负责人电话",
        manageTypeId: 1,
        upTime: "成立时间",
        acreage: "面积",
        getNationYear: "获得国家时间",
        getProvinceYear: "省时间",
        getCityYear: "地市时间",
        getCountyYear: "县级时间",
        manageOnNum: 34,
        manageOutNum: 12,
        teacherOnNum: 23,
        teacherOutNum: 6,
        coachOnNum: 71,
        coachOutNum: 12,
        yearActivityNum: 7,
        yearJoinPeopleNum: 1679,
        writePeople: "记录人",
        writeTime: "记录时间",
        writePhone: "记录人电话",
        fSheet6bList: [
          {
            sportName: "篮球",
            teacherNum: 6,
            coachNum: 8
          },
          {
            sportName: "跆拳道",
            teacherNum: 9,
            coachNum: 8
          },
          {
            sportName: "跆拳道",
            teacherNum: 9,
            coachNum: 8
          }
        ],
        fSheet6cList: [
          {
            joinActivityTypeId: 1,
            joinTime: "参加时间",
            result: "第一名"
          },
          {
            joinActivityTypeId: 1,
            joinTime: "参加时间2015",
            result: "第一名"
          },
          {
            joinActivityTypeId: 1,
            joinTime: "参加时间2015",
            result: "第一名"
          },
          {
            joinActivityTypeId: 2,
            joinTime: "参加时间2015",
            result: "第一名"
          },
          {
            joinActivityTypeId: 2,
            joinTime: "参加时间2015",
            result: "第一名"
          },
          {
            joinActivityTypeId: 2,
            joinTime: "参加时间2015",
            result: "第一名"
          },
          {
            joinActivityTypeId: 3,
            joinTime: "参加时间2015",
            result: "第一名"
          },
          {
            joinActivityTypeId: 3,
            joinTime: "参加时间2015",
            result: "第一名"
          },
          {
            joinActivityTypeId: 3,
            joinTime: "参加时间2015",
            result: "第一名"
          }
        ]
      },
      //经营模式 体育部门（1独立 2委托体校 3委托社会） 教育部门（4独立 5依托校外 6委托社会） 7其他 manageTypeId
      Businessmodel: {
        SportsIndependence: "",
        SportsSchool: "",
        SportsSociety: "",
        EducationalIndependence: "",
        EducationOffCampus: "",
        EducationalSociety: "",
        other: ""
      },
      showMenu: false,
      menuStyle: {
        left: "0px",
        top: "0px"
      },
      currentSection: "",
      currentRowIndex: -1,
      currentActivityType: ""
    };
  },

  //更新数据
  watch: {
    Alldata(newValue, oldValue) {
      this.dataform = newValue;

      if (this.dataform.manageTypeId) {
        this.dataform.manageTypeId.split(",").forEach(item => {
          if (item == "1") {
            this.Businessmodel.SportsIndependence = "√";
          }
          if (item == "2") {
            this.Businessmodel.SportsSchool = "√";
          }
          if (item == "3") {
            this.Businessmodel.SportsSociety = "√";
          }
          if (item == "4") {
            this.Businessmodel.EducationalIndependence = "√";
          }
          if (item == "5") {
            this.Businessmodel.EducationOffCampus = "√";
          }
          if (item == "6") {
            this.Businessmodel.EducationalSociety = "√";
          }
          if (item == "7") {
            this.Businessmodel.other = "√";
          }
        });
      }
      // if (this.dataform.campingType == 1) {
      //   this.campingTypelist.selfOwned = "√"
      // }
      // if (this.dataform.campingType == 2) {
      //   this.campingTypelist.lease = "√"
      // }
    }
  },

  methods: {
    showbuut() {
      this.showbutton = false;
    },

    submit() {
      const manageTypeIdlist = [];
      if (this.Businessmodel.SportsIndependence) {
        manageTypeIdlist.push("1");
      }

      if (this.Businessmodel.SportsSchool) {
        manageTypeIdlist.push("2");
      }
      if (this.Businessmodel.SportsSociety) {
        manageTypeIdlist.push("3");
      }
      if (this.Businessmodel.EducationalIndependence) {
        manageTypeIdlist.push("4");
      }
      if (this.Businessmodel.EducationOffCampus) {
        manageTypeIdlist.push("5");
      }
      if (this.Businessmodel.EducationalSociety) {
        manageTypeIdlist.push("6");
      }
      if (this.Businessmodel.other) {
        manageTypeIdlist.push("7");
      }

      this.dataform.manageTypeId = manageTypeIdlist.toString();

      insert_update_sheet6(this.dataform).then(res => {
        this.$message.success("填报成功");
        manageTypeIdlist = [];
      });
    },

    showProjectContextMenu(event, index) {
      this.showMenu = true;
      this.currentSection = "project";
      this.currentRowIndex = index;
      this.menuStyle = {
        left: event.clientX + "px",
        top: event.clientY + "px"
      };
    },

    showActivityContextMenu(event, index, type) {
      this.showMenu = true;
      this.currentSection = "activity";
      this.currentActivityType = type;
      this.currentRowIndex = index;
      this.menuStyle = {
        left: event.clientX + "px",
        top: event.clientY + "px"
      };
    },

    hideContextMenu() {
      this.showMenu = false;
    },

    addRow() {
      if (this.currentSection === "project") {
        const newProject = {
          sportName: "",
          teacherNum: "",
          coachNum: ""
        };
        this.dataform.fSheet6bList.push(newProject);
      } else if (this.currentSection === "activity") {
        const newActivity = {
          joinActivityTypeId:
            this.currentActivityType === "national"
              ? 1
              : this.currentActivityType === "provincial"
              ? 2
              : 3,
          joinTime: "",
          result: ""
        };

        let insertIndex =
          this.currentActivityType === "national"
            ? 3
            : this.currentActivityType === "provincial"
            ? 6
            : 9;

        this.dataform.fSheet6cList.splice(insertIndex, 0, newActivity);
      }
      this.hideContextMenu();
    },

    deleteRow() {
      if (this.currentSection === "project") {
        if (this.dataform.fSheet6bList.length > 1) {
          this.dataform.fSheet6bList.splice(this.currentRowIndex, 1);
        }
      } else if (this.currentSection === "activity") {
        const currentTypeId =
          this.currentActivityType === "national"
            ? 1
            : this.currentActivityType === "provincial"
            ? 2
            : 3;

        const currentTypeActivities = this.dataform.fSheet6cList.filter(
          item => item.joinActivityTypeId === currentTypeId
        );

        if (currentTypeActivities.length > 1) {
          const indexToDelete = this.dataform.fSheet6cList.findIndex(
            item => item === currentTypeActivities[this.currentRowIndex]
          );
          if (indexToDelete !== -1) {
            this.dataform.fSheet6cList.splice(indexToDelete, 1);
          }
        }
      }
      this.hideContextMenu();
    }
  },
  computed: {
    additionalNationalRows() {
      return this.dataform.fSheet6cList.filter(
        item => item.joinActivityTypeId === 1
      ).length;
    },
    additionalProvincialRows() {
      return this.dataform.fSheet6cList.filter(
        item => item.joinActivityTypeId === 2
      ).length;
    },
    additionalOtherRows() {
      return this.dataform.fSheet6cList.filter(
        item => item.joinActivityTypeId === 3
      ).length;
    },
    totalActivityRows() {
      return (
        3 +
        this.additionalNationalRows +
        this.additionalProvincialRows +
        this.additionalOtherRows
      );
    }
  },
  mounted() {
    document.addEventListener("click", this.hideContextMenu);
  },
  beforeDestroy() {
    document.removeEventListener("click", this.hideContextMenu);
  }
};
</script>

<style scoped>
table {
  border-collapse: collapse;
  /* //合并为一个单一的边框 */
  border-color: #a2a7ab;
  /* //边框颜色按实际自定义即可 */
  margin-bottom: 10px;
}

thead tr th {
  background-color: #f8f8f9;
  /* //设置表格标题背景色 */
  padding: 3px;
  text-align: center;
}

tbody tr td {
  padding: 3px;
  text-align: center;
  height: 34px;
  /* //设置单元格最小高度 */
}
tbody tr td input {
  width: 99%;
  height: 95%;
  text-align: center;
  border: none;
  background: white;
}

.context-menu {
  position: fixed;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px 0;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.menu-item {
  padding: 8px 12px;
  cursor: pointer;
}

.menu-item:hover {
  background-color: #f5f5f5;
}
</style>
